<!doctype html>
<html>
<head>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<title>XuLuo</title>
	<link rel="stylesheet" type="text/css" href="css/layer.css">
	<style>
		*{font-family: microsoft yahei;margin: 0;padding: 0;}
		a{text-decoration: none;outline: none;}
		ul,li{list-style: none;}
		.btn{display:inline-block;padding:0 30px;height:36px;line-height:36px;background:#009688;color:#fff;font-size:15px;opacity:0.9;filter:alpha(opacity=90);cursor:pointer;border-radius:2px;}
		.btn:hover{opacity:1;filter:alpha(opacity=100);}
		.btn:active{opacity:0.9;filter:alpha(opacity=90);}
		/*所需css*/
		
	</style>
</head>
<body>
	<a href="http://layer.layui.com/mobile" target="_blank" class="btn" style="margin: 20px;">官网文档</a>
	<p style="text-align: center;margin: 20px auto;"><a href="javascript:;" class="btn" onclick="layer1()">提示信息</a></p>
	<p style="text-align: center;margin: 20px auto;"><a href="javascript:;" class="btn" onclick="layer2()">内容</a></p>
	<p style="text-align: center;margin: 20px auto;"><a href="javascript:;" class="btn" onclick="layer3()">自定义标题风格</a></p>
	<script type="text/javascript" src="js/layer.js"></script>
	<script>
		function layer1(){
			//提示
			layer.open({
				content: 'hello layer'
				,skin: 'msg'
				,time: 2 //2秒后自动关闭
			});
		}
		function layer2(){
			layer.open({
			  style: 'background-color:#78BA32;color:#fff;',
			  content:'内容'
			});
		}
		function layer3(){
			layer.open({
			    title: [
			      '我是标题',
			      'background-color: #FF4351; color:#fff;'
			    ]
			    ,content: '标题风格任你定义。'
			});
		}
	</script>
</body>
</html>